#include("/manage/_common/_layout.html")
#@layout()

### ********************************* 定义页面标题
#define title()
广告项列表
#end

### ********************************* css导入
#define import_css()
<style>
.layui-table-cell img{max-width:50px; height:28px}
</style>
#end

### ********************************* js导入
#define import_js()
#end

### ********************************* Body内容区开始
#define main()
<div class="layui-form layui-card-header" style="height: auto;">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-inline">
				<input id="title" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">广告位置</label>
			<div class="layui-input-inline">
				<select id="placeId" lay-search="">
					<option value="">-- 请选择 --</option>
					#for(adPlace : adPlaceList)
					<option value="#(adPlace.id)">#(adPlace.name) (#(adPlace.code))</option>
					#end
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">设备</label>
			<div class="layui-input-inline">
				<select id="device">
					<option value=""><i class="layui-icon"></i>-- 请选择 --</option>
			#dictList(parentKey="device_type")
				#for(dict : dictList)
					<option value="#(dict.key)"><i class="layui-icon #(dict.para)"></i>&nbsp;&nbsp;#(dict.value)</option>
				#end
			#end
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">广告类型</label>
			<div class="layui-input-inline">
				<select id="type">
					<option value="">-- 请选择 --</option>
			#dictList(parentKey="ad_type")
				#for(dict : dictList)
					<option value="#(dict.key)">#(dict.value)</option>
				#end
			#end
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-inline">
				<select id="status">
					<option value="">-- 请选择 --</option>
					<option value="on">启用</option>
					<option value="off">禁用</option>
				</select>
			</div>
		</div>
		<div class="layui-inline">
			<a class="layui-btn" lay-submit="" id="ID_btn_search">
				<i class="layui-icon layui-icon-search"></i>
			</a>
		</div>
	</div>
</div>

<table class="layui-table"
	lay-data="{title:'广告项列表', height: 'full-140', cellMinWidth: 60,url:'#(ctx)/manage/ad/ajaxSearch', page:true, initSort: {field:'placeCode', type:'asc'}, id:'ID_master_table', toolbar: '#ID_master_table_toolbar'}"
	lay-filter="LAY-master-table">
	<thead>
		<tr>
			<th lay-data="{field:'id', width:60, align:'center', sort: true, fixed: true}">ID</th>
			<th lay-data="{width:80, sort: true, align:'center', templet:'#statusTpl', fixed: true}">状态</th>
			<th lay-data="{field:'title', width:260, sort: true, fixed: true}">标题</th>
			<th lay-data="{width:140, align:'center', sort: true, templet:'#deviceTpl'}">设备</th>
			<th lay-data="{field:'placeName', width:160, sort: true}">位置</th>
			<th lay-data="{field:'placeCode', width:160, sort: true}">代码</th>
			<th lay-data="{field:'sortNum', width:80, align:'center', sort: true}">排序</th>
			<th lay-data="{width:80, align:'center', sort: true, templet:'#typeTpl'}">类型</th>
			<th lay-data="{width:80, align:'center', templet:'#reviewTpl'}">预览</th>
			<th lay-data="{width:80, align:'center', templet:'#coverTpl'}">封面</th>
			<th lay-data="{field:'startTime', width:160, sort: true}">开始时间</th>
			<th lay-data="{field:'endTime', width:160, sort: true}">结束时间</th>
			<th lay-data="{width:160, sort: true, templet:'#editorTpl'}">编辑人</th>
			<th lay-data="{field:'editedTime', width:160, sort: true}">编辑时间</th>
			<th lay-data="{fixed: 'right', width:140, align:'center', toolbar: '#ID_master_table_action'}">操作</th>
		</tr>
	</thead>
</table>

<!-- 行操作栏 -->
<script type="text/html" id="ID_master_table_action" >
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>

<!-- 数据表格头部工具栏 -->
<script type="text/html" id="ID_master_table_toolbar">
	<div class="layui-btn-container">
		<a class="layui-btn layui-btn-sm" lay-event="add" id="ID_btn_add"><i class="layui-icon layui-icon-add-circle"></i> 添加</a>
	</div>
</script>

<!-- 数据表格单元格模板区域 -->
<script type="text/html" id="statusTpl">
#[[
	{{# if(d.status === 'off'){ }}
		<span class="layui-badge">禁用</span>
	{{#	} else { }}
		<span class="layui-badge layui-bg-gray">启用</span>
	{{# } }}
]]#
</script>

<script type="text/html" id="reviewTpl">### 预览单元格模板区域
#[[
	{{# if(d.type === 'image'){ }}
		<img onclick="Jfsa.reviewImage(this);" src="{{ d.img }}">
	{{# } else if(d.type === 'video'){ }}
		<a href="javascript:Jfsa.reviewVideo('{{ d.video }}');" review-src="{{ d.video }}"><img src="]]# #(ctx)#[[/manage/_assets/images/icon/video_48.png"></a>
	{{# } else if(d.type === 'audio'){ }}
		<a href="javascript:Jfsa.reviewAudio('{{ d.audio }}');" review-src="{{ d.audio }}"><img src="]]# #(ctx)#[[/manage/_assets/images/icon/audio_48.png"></a>
	{{# } else if(d.type === 'file'){ }}
		<a href="{{ d.file }}"><img src="]]# #(ctx)#[[/manage/_assets/images/icon/file_48.png"></a>
	{{# } else if(d.type === 'link'){ }}
		<a href="{{ d.url }}" target="_blank"><img src="]]# #(ctx)#[[/manage/_assets/images/icon/link_48.png"></a>
	{{# } else if(d.type === 'goods'){ }}
		<img src="]]# #(ctx)#[[/manage/_assets/images/icon/goods_48.png">
	{{#	} else { }}
		<img src="]]# #(ctx)#[[/manage/_assets/images/icon/file_48.png">
	{{# } }}
]]#
</script>
<script type="text/html" id="coverTpl">### 设备类型单元格模板区域
#[[
	{{# if(d.cover){ }}
		<img onclick="Jfsa.reviewImage(this);" class="image" src="{{ d.cover }}">
	{{#  } }}
]]#
</script>

<script type="text/html" id="deviceTpl">### 设备类型单元格模板区域
#[[
	{{# if(d.device === 'pc'){ }}
		<span style="color: #B181F5;">桌面端</span>
	{{#  } else if(d.device === 'h5') { }}
		<span style="color: #F581B1;">移动端</span>
	{{#  } else if(d.device === 'pc,h5') { }}
		<span style="color: #F581B1;">桌面端 + 移动端</span>
	{{#  } }}
]]#
</script>

<script type="text/html" id="typeTpl"> ### 广告项类型单元格模板区域
#[[
	{{# if(d.type===''){ }} 其它 </span>
	{{# } }}
]]#
#dictList(parentKey="ad_type")
	#for(dict : dictList)
#[[ {{# if(d.type === ]]# '#(dict.key)' #[[ ){ }} ]]#
		#(dict.value)
#[[	{{# } }} ]]#
	#end
#end
</script>

<script type="text/html" id="editorTpl"> ### 编辑人单元格模板区域
#adminList()
	#for(admin : adminList)
#[[ {{# if(d.editorId === ]]# #(admin.id) #[[ ){ }} ]]#
		#(admin.name)
#[[	{{# } }} ]]#
	#end
#end
</script>
#end
### ********************************* Body内容区结束

### ********************************* 脚本区开始
#define script()
#include("_index_script.html")
#end
### ********************************* JS脚本区结束
